<script lang="ts">
// export default {
//   options: {
//     virtualHost: true, // 虚拟节点
//     styleIsolation: 'shared', // 解除样式隔离
//   },
// }
// //
</script>

//
<script lang="ts" setup>
import { useDictOptions } from '@/hooks/useDict'

const props = withDefaults(defineProps<Props>(), {
  classYear: undefined,
  term: undefined,
})

const emit = defineEmits(['update:classYear', 'update:term'])

interface Props {
  classYear?: number
  term?: string
}

const selectIndex = ref([])
const pickerOptions = ref([])

const getOptionList = async () => {
  const years = []
  const currentYear = new Date().getFullYear()
  for (let i = 0; i <= 4; i++) {
    years.push({
      value: currentYear + i,
      label: `${currentYear + i}`,
    })
  }
  const terms = useDictOptions('TermEnum').map((item) => {
    return {
      value: item.value,
      label: item.label,
    }
  })
  pickerOptions.value = [years, terms]
}

const displayValue = computed(() => {
  if (selectIndex.value.length === 2) {
    return pickerOptions.value[0][selectIndex.value[0]]?.label + pickerOptions.value[1][selectIndex.value[1]]?.label
  } else {
    return '学期'
  }
})

const onChange = (e) => {
  selectIndex.value = e.detail.value

  const classYear = pickerOptions.value[0][selectIndex.value[0]]
  const term = pickerOptions.value[1][selectIndex.value[1]]
  emit('update:classYear', classYear.value)
  emit('update:term', term.value)
}

watchEffect(() => {
  if (props.classYear && props.term && pickerOptions.value.length > 0) {
    const i1 = pickerOptions.value[0].findIndex(item => item.value === props.classYear)
    const i2 = pickerOptions.value[1].findIndex(item => item.value === props.term)
    selectIndex.value = [i1, i2]
  } else {
    selectIndex.value = []
  }
})

onMounted(() => {
  getOptionList()
})
</script>

<template>
  <picker
    :value="selectIndex"
    :range="pickerOptions"
    range-key="label"
    mode="multiSelector"
    @change="onChange"
  >
    <view class="text-center line-1">
      {{ displayValue }}
    </view>
    <!-- <view class="flex items-center gap-1 line-1">
      <view class="text-center line-1">
        {{ displayValue }}
      </view>
      <slot />
    </view> -->
  </picker>
</template>

<style  scoped>
</style>
